<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Fresns" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="generator" content="Bootstrap 5">
    <title>列表模块介绍</title>
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/bootstrap-icons.css">
    <link rel="stylesheet" href="../assets/css/fresns.css">
    <style>
        .bg-secondary {
            background-color: #F0F2F5!important;
        }
        .bg-light {
            background-color: #ffffff!important;
        }
    </style>
</head>

<body>
    <!--页头-->
    <header>
        <div class="text-center mt-5"><img src="../assets/images/fresns-icon.png" height="80"></div>
    </header>

    <div class="container-fluid mb-5">
        <div class="text-center my-5">
            <div class="text-center mt-3">
                <div class="btn-group">
                    <a href="style/member.html" class="btn btn-outline-primary disabled">样式</a>
                    <a href="code/member.html" class="btn btn-outline-primary disabled">结构</a>
                    <a href="desc/member.html" class="btn btn-outline-primary disabled">说明</a>
                </div>
            </div>
        </div>
        <ul class="nav nav-tabs justify-content-center">
            <li class="nav-item"><a class="nav-link active" href="index.html">首页</a></li>
            <li class="nav-item"><a class="nav-link" href="style/member.html">成员列表</a></li>
            <li class="nav-item"><a class="nav-link" href="style/group.html">小组列表</a></li>
            <li class="nav-item"><a class="nav-link" href="style/hashtag.html">话题列表</a></li>
            <li class="nav-item"><a class="nav-link" href="style/post.html">帖子列表</a></li>
            <li class="nav-item"><a class="nav-link" href="style/comment.html">评论列表</a></li>
            <li class="nav-item"><a class="nav-link" href="style/extend.html">扩展内容模板</a></li>
            <li class="nav-item"><a class="nav-link" href="style/implant.html">植入内容模板</a></li>
        </ul>
    </div>

    <div class="container-md clearfix">
        <div class="row">
            <!--左侧导览 开始-->
            <div class="col-2">
                <nav class="nav nav-pills flex-column">
                    <a class="flex-sm-fill text-sm-center nav-link active" href="index.html">语法说明</a>
                    <a class="flex-sm-fill text-sm-center nav-link" href="header.html">页头</a>
                    <a class="flex-sm-fill text-sm-center nav-link" href="footer.html">页尾</a>
                </nav>
            </div>
            <!--左侧导览 结束-->
            <div class="col-10 col-lg-8">
                <div class="card">
                    <div class="card-header">陈述语句介绍</div>
                    <div class="card-body">
                        <p>配置表键名键值，内容接口参数，任何值都可以当陈述条件。</p>
                        <p>场景 1：通过配置接口参数，控制帖子列表某个参数是否在前端显示。</p>
                        <p>场景 2：帖子列表通过列表一级参数，控制子级某个参数是否在前端显示。</p>
                        <p>场景 3：某个参数数值，可以使用加减公式决定前端是否显示，例如帖子子级回复数量减配置表 comment_preview 键值，如果结果为 0 则不显示某个 DIV 内容。</p>
                    </div>
                </div>
                <!--分隔线-->
                <div class="card mt-4">
                    <div class="card-header">平级菜单介绍</div>
                    <div class="card-body">
                        <p>用户感知一款产品的功能，并不取决于 URL，主要来源于 UE 和 UI 层面（面包屑导航），所以我们要采用了平级菜单模式。</p>
                        <p>任何页面，任何菜单都能被 <kbd>active</kbd></p>
                        <p><code>&lt;a href="https://fresns.cn/posts/lists" class="btn btn-link <kbd>active</kbd>"&gt;全部帖子&lt;/a&gt;</code></p>
                        <!--陈述语句描述-->
                        <div class="position-relative p-3 mt-3 mb-3 bg-secondary text-dark">
                            <div class="position-absolute top-0 start-0"><span class="badge bg-info text-dark">陈述语句描述</span></div>
                            <p class="mt-4">单个条件：如果路径为 <span class="badge bg-primary">/posts/lists</span> 则显示 <kbd>active</kbd></p>
                            <hr>
                            <p class="mt-4">两个条件：如果路径为 <span class="badge bg-primary">/posts/lists</span> 和 <span class="badge bg-primary">/hashtags/follows</span> 则显示 <kbd>active</kbd></p>
                            <hr>
                            <p class="mt-4">多个条件：如果路径为 <span class="badge bg-primary">/posts/lists</span> 和 <span class="badge bg-primary">/hashtags/follows</span> 和 <span class="badge bg-primary">/hashtags/nearbys</span> 则显示 <kbd>active</kbd></p>
                        </div>
                        <ul>
                            <li><mark>路径不包括网址</mark></li>
                            <li>/posts/lists/all <mark>子级目标也算，如果路径是 /posts，则 /posts/lists 和 /posts/lists/all 都符合条件</mark></li>
                            <li>/posts/lists?mid=12345&sortType=view&sortDirection=2 <mark>带参数也算</mark></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="text-center" style="margin-top:100px;">
        <div><img src="../assets/images/fresns-logo.png" height="30"></div>
        <p class="mt-3 mb-5"><a href="https://tangjie.me" target="_blank">唐杰出品</a></p>
    </footer>

    <script src="../assets/javascript/bootstrap.bundle.min.js"></script>
    <script src="../assets/javascript/fresns.js"></script>
</body>

</html>